<template>
  <div class="article-page">
    <!-- 首页 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imgSrc" :key="item.id">
        <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="" />
        <!-- <img :src=`http://liufusong.top:8080  ${item.imgSrc}` alt=""> -->
      </van-swipe-item>
    </van-swipe>
    <div class="location">
      <div class="location-l">
        <div class="locationLeft" @click="skip">
          <span>上海</span>
          <span><van-icon name="arrow-down" /></span>
          <span class="ccc">|</span>
        </div>
        <div class="locationright">
          <van-search v-model="value" placeholder="请输入搜索关键词" />
        </div>
      </div>

      <div class="location-r">
        <i class="iconfont icon-ditudingwei"></i>
      </div>
    </div>
    <div class="colorW">
      <van-grid>
        <van-grid-item class="iconfont icon-fangzi-2" text="整租" />
        <van-grid-item class="iconfont icon-haoyou-xianxing" text="合租" />
        <van-grid-item class="iconfont icon-xianxingdingwei" text="地图找房" />
        <van-grid-item class="iconfont icon-chuzuwu-copy" text="去出租" />
      </van-grid>
    </div>
    <div class="userText">
      <div class="userTextL">租房小组</div>
      <div class="userTextR">更多</div>
    </div>
    <div class="artFooter"  >
      <van-grid :column-num="2" gutter='10'>
        <van-grid-item icon="photo-o" text="家住回龙观,归属的感觉" />
        <van-grid-item icon="photo-o" text="宜居四五环,大都市生活" />
        <van-grid-item icon="photo-o" text="喧嚣三里屯,繁华的背后" />
        <van-grid-item icon="photo-o" text="比邻十号线,地铁心连心" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'article-page',
  data() {
    return {
      value: '',
      imgSrc: '',
    }
  },
  async created() {
    // ​/home​/swiper
    const data = await request('/home/swiper')
    this.imgSrc = data.body
  },
  methods: {
    skip() {
      this.$router.push('/skiPcity')
    }
  },
}
</script>

<style lang="less" scoped>
.article-page {
  background-color: rgb(244, 244, 244);
  .colorW {
    background-color: #fff;
  }
}
.location .location-r[data-v-5b5b10cc] {
  text-align: center;
  line-height: 30px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
  // background-color: #39a9ed;
  width: 100%;
  img {
    width: 100%;
  }
}
.layout-page {
  width: 100%;
  height: 300px;
}
.location {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 90%;
  height: 30px;
  margin: 1px auto;
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  .location-l {
    background-color: #fff;
    flex: 2;
    width: 100%;
    height: 100%;
    display: flex;
    .locationLeft {
      text-align: center;
      line-height: 30px;
      width: 70px;
      .ccc {
        color: #ccc;
      }
      span {
        margin-left: 5px;
      }
    }
    .locationright {
      flex: 1;
      .van-search {
        margin: 0;
        padding: 0 !important;
      }
    }
  }
  .location-r {
    margin-left: 5px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid #fff;
    // background-color: #fff;
  }
}
.icon-ditudingwei {
  text-align: center;
  line-height: 25px;
  color: #fff;
  font-weight: 500;
}
.icon-fangzi-2,
.icon-haoyou-xianxing,
.icon-xianxingdingwei,
.icon-chuzuwu-copy {
  color: aquamarine;
  font-size: 32px;
  text-align: center;
  margin-top: 30px;
  font-weight: 600;
}
.userText {
  display: flex;
  height: 40px;
  margin-top: 30px;

  padding: 10px;
  .userTextL {
    line-height: 40px;
    flex: 1;

  }
  .userTextR {
    color: #333;
    font-size: 14px;
    line-height: 40px;
  }

}
</style>
